<div class="monitoring">
  <button class="btn pull-right" ng-click="go_back()" style="right:30px;">返回</button>
  
  <div class="row-fluid">
    <div class="span3 well">
      <div ng-show="monitoring.type=='server'"><span>主机名:{{host.host_name}}</span></div>
      <div ng-show="monitoring.type=='instance'"><span>主机名:{{host.name}}</span></div>
      <div ng-show="monitoring.type=='server'"><span>ip地址:{{host.ip}}</span></div>
      <div><span>主机类型:{{hosttype}}</span></div>
      <div><span>运行状态:{{status_desc}}</span></div>
    </div>

    <div class="span8">
        <div class="well" style="margin-bottom: 10px;">
            <input value="0" type="radio" name="monitor-time" ng-model="monitorTime" ng-change="change(monitorTime);">周期时间
            <input value="1" type="radio" name="monitor-time" ng-model="monitorTime" ng-change="change(monitorTime);">具体时间
        </div>

        <div class="control-group" id="time_given" style="display: block">
            <label class="control-label">监控周期：</label>
            <div>
                <select ng-options="tr.name for tr in timerange"  ng-model="monitoring.timerange" ng-change="show_target_image(monitoring.type)"></select>
            </div>
        </div>

        <div class='row-fluid' id="time_chosen" style="display: none">
            <!-- starttime -->
            <div class='span5 control-group'>
                <label class="control-label">开始时间：</label>
                <div class="controls">
                    <div class="input-append span6">
                        <input id="monitor_start_date" type="text" class="span9" ng-model="monitor_start_date" data-date-format="yyyy-mm-dd" bs-datepicker>
                        <button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
                    </div>
                    <div class="input-append span6">
                        <input id="monitor_start_time" type="text" class="span8" data-show-meridian="false" data-show-seconds="true" ng-model="monitor_start_time" bs-timepicker>
                        <button type="button" class="btn" data-toggle="timepicker"><i class="icon-time"></i></button>
                    </div>
                </div>
            </div>
            <!-- endtime -->
            <div class='span5 control-group'>
                <label class="control-label">结束时间：</label>
                <div class="controls">
                    <div class="input-append span6">
                        <input id="monitor_end_date" type="text" class="span9" ng-model="monitor_end_date" data-date-format="yyyy-mm-dd" bs-datepicker>
                        <button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
                    </div>
                    <div class="input-append span6">
                        <input id="monitor_end_time" type="text" class="span8" data-show-meridian="false" data-show-seconds="true" ng-model="monitor_end_time" bs-timepicker>
                        <button type="button" class="btn" data-toggle="timepicker"><i class="icon-time"></i></button>
                    </div>
                </div>
            </div>
            <div class="span2"><label>&nbsp;</label><button type="button" class="btn" ng-click="show_giventime_image(monitoring.type)">提交</button></div>

        </div>
  </div>
 </div>

  <div class="accordion" id="monitor-image">
      <div class="accordion-group">
          <div class="accordion-heading">
              <a href="#cpu-monitor-image" class="accordion-toggle" data-toggle="collapse" data-parent="#monitor-image">CPU监控</a>
          </div>
          <div id="cpu-monitor-image" class="accordion-body collapse in">
              <div class="accordion-inner span6" ng-repeat="image in monitoring.cpu_images">
                  <img src="{{image.url}}" height="100" ng-click="show_image(image)"/>
              </div>
          </div>
      </div>

      <div class="accordion-group" ng-show="monitoring.type=='server'">
        <div class="accordion-heading">
            <a href="#memory-monitor-image" class="accordion-toggle" data-toggle="collapse" data-parent="#monitor-image">内存监控</a>
        </div>
        <div id="memory-monitor-image" class="accordion-body collapse in">
            <div class="accordion-inner" ng-repeat="image in monitoring.mem_images">
                <img src="{{image.url}}" height="100" ng-click="show_image(image)"/>
            </div>
        </div>
      </div>

      <div class="accordion-group">
          <div class="accordion-heading">
              <a href="#disk-monitor-image" class="accordion-toggle" data-toggle="collapse" data-parent="#monitor-image">磁盘监控</a>
          </div>
          <div id="disk-monitor-image" class="accordion-body collapse in">
              <div class="accordion-inner span6" ng-repeat="image in monitoring.disk">
                  <img src="{{image.url}}" height="100" ng-click="show_image(image)"/>
              </div>
          </div>
      </div>

      <div class="accordion-group">
          <div class="accordion-heading">
              <a href="#if-monitor-image" class="accordion-toggle" data-toggle="collapse" data-parent="#monitor-image">网卡监控</a>
          </div>
          <div id="if-monitor-image" class="accordion-body collapse in">
              <div class="accordion-inner span6" ng-repeat="image in monitoring.interface">
                  <img src="{{image.url}}" height="100" ng-click="show_image(image)"/>
              </div>
          </div>
      </div>

      <div class="accordion-group"  ng-show="monitoring.type=='server'">
          <div class="accordion-heading">
              <a href="#load-monitor-image" class="accordion-toggle" data-toggle="collapse" data-parent="#monitor-image">负载监控</a>
          </div>
          <div id="load-monitor-image" class="accordion-body collapse in">
              <div class="accordion-inner span6" ng-repeat="image in monitoring.load">
                  <img src="{{image.url}}" height="100" ng-click="show_image(image)"/>
              </div>
          </div>
      </div>
  </div>
</div>